<template>
    <view class="popup-container" v-if="visible">
        <view class="popup-overlay" @click="close"></view>
        <view class="popup-content dir-ltr">
            <view class="pt-md fs-md text-center">{{ title ? (title == 'false' ? '' : title) : $t('tips') }}</view>
            <slot></slot>
            <view v-if="footerBtn" class="row items-center justify-around" style="border-top: 1rpx solid #6062661e">
                <view class="pa-md text-gray fs-md width50 text-center" @click="close">{{ $t('cancel') }}</view>
                <view class="pa-md fs-md width50 text-center" style="border-left: 1rpx solid #6062661e" @click="confirm" :style="{ color: sendFlag ? '#b4b8ba' : confirmColor }">{{ $t('confirm') }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'CustomPopup',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '',
        },
        footerBtn: {
            type: Boolean,
            default: true,
        },
        confirmColor: {
            type: String,
            default: 'red',
        },
    },
    data() {
        return {
            // 防多次提交
            sendFlag: false,
        }
    },
    methods: {
        close() {
            this.$emit('update:visible', false) // 触发事件通知父组件关闭弹窗
        },
        confirm() {
            // 防多次提交
            if (this.sendFlag) return
            this.sendFlag = true
            setTimeout(() => {
                this.sendFlag = false
            }, 700)
            this.$emit('confirm')
        },
    },
}
</script>

<style scoped>
.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.popup-content {
    position: relative;
    background: white;
    /* padding: 20px; */
    border-radius: 24px;
    z-index: 1001;
    width: 78vw;
}

.close-button {
    margin-top: 20px;
}
</style>
